import React from 'react';
import ReactDOM from 'react-dom';

class Child1 extends React.Component {
    constructor(props) {
        super(props);
    }
    handleClick(e) {
        this.props.changeChild2Color('green')
    }
    render() {
        return (
            <div style={{background: this.props.bgColor}}>
                <p style={{ background: "red", margin: "10px",padding:'10px' }}>我是一哥组件{this.props.bgColor}
                    <br />
                    <button onClick={(e) => { this.handleClick(e) }}>改变二哥背景颜色</button>
                </p>

            </div>
        )
    }
}
class Child2 extends React.Component {
    constructor(props) {
        super(props);
    }
    handleClick(e) {
        this.props.changeColor('green')
    }
    render() {
        return (
            <div>
                <p style={{ background: this.props.bgColor, margin: "10px",padding:'10px' }}>我是二哥组件{this.props.bgColor}
                </p>

            </div>
        )
    }
}

class Father extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            child2BgColor: "#999"
        }
    }
    onChild2BgColorChange(color) {
        this.setState({
            child2BgColor: color
        })
    }
    render(props) {
        return (
            <div style={{ backgroundColor: 'gray',padding: '10px' }}>
                <h3>我是属于父组件的标题</h3>
                <Child1 changeChild2Color ={(color)=> {this.onChild2BgColorChange(color)}}/>
                <Child2 bgColor = {this.state.child2BgColor}/>
            </div>
            // <div>
            //     <h1>{this.props.title}</h1>
            //     <div>{this.props.children}</div>
            // </div>
        );
    }
}

class MyApp extends React.Component {
    render() {
        return (
            <div className=''>
                <Father title='App title'>
                    <span>App Span</span>
                    <a href="">link</a>
                </Father>
                <hr />
                <p>其它段落</p>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <MyApp />
    </div>,
    document.getElementById('app')
);